import React, { useEffect } from 'react';
import { Rotation } from './DetailRotation.style'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
const RotationChart = (props) => {
    const { rotationImg } = props;
    // console.log(rotationImg);
    // console.log(rotationImg, "---------------");
    useEffect(() => {
        setTimeout(() => {
            new Swiper('.swiper-container', {
                loop: true,
                autoplay: false,
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                }
            })
        }, 100);
    }, [])

    return (
        <Rotation>
            <div className="rotation-box">
                <div className="swiper-container" >
                    <div className="swiper-wrapper">
                        {
                            rotationImg.map((item, index) => {
                                // console.log(item);
                                return (
                                    <div
                                        className="swiper-slide"
                                        key={index}
                                    >
                                        {/* <a href={item.linkUrl}> */}
                                        <img className='rotationChart-img' src={item.img} alt="" />
                                        {/* </a> */}
                                    </div>

                                )
                            })
                        }
                    </div>
                    <div className="swiper-pagination"></div>
                </div>

            </div>
        </Rotation>
    );
}

export default RotationChart;